<template>
  <div>
    <div class="box" @click="loginbbox">
      <div v-show="loginbox">
        <van-tabs v-model="activeName" class="title">
          <van-tab title="普通登录" name="a">
            <van-form @submit="onSubmit">
              <van-field
                  v-model="username"
                  name="请填写账号"
                  label="请填写账号"
                  placeholder="请填写账号"
              />
              <van-field
                  v-model="password"
                  type="password"
                  name="请填写密码"
                  label="请填写密码"
                  placeholder="请填写密码"
              />
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                  登录
                </van-button>
              </div>
            </van-form>
          </van-tab>
          <van-tab title="手机登录" name="b">
            <!-- 输入手机号，调起手机号键盘 -->
            <van-field v-model="tel" type="tel" label="手机号" />
            <van-field
                v-model="sms"
                center
                clearable
                label="验证码"
                placeholder="验证码"
            >
              <template #button>
                <van-button size="small" type="primary" @click="getPhoneCode">发送验证码</van-button>
              </template>
            </van-field>
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">
                登录
              </van-button>
            </div>
          </van-tab>
        </van-tabs>

      </div>
    <!--     立即注册 -->
      <SignIn v-show="isshow1"/>
      <!--     忘记密码 -->
      <Forget v-show="isshow2"/>
    </div>
    <div class="bttn">
      <span @click="isSignIn">立即注册!</span>
      <span @click="isForget">忘记密码?</span>
    </div>
  </div>
</template>
<script>
import {getAccountLogin, getLoginPhoneCode} from "@/api/login-api";
import SignIn from "@/views/login/components/SignIn";
import Forget from "@/views/login/components/Forget";
export default {
  name: "IoginBox",
  components: {
    SignIn,
    Forget
  },
  data() {
    return {
      activeName: "a",
      tel: '',
      sms: '',
      username: '',
      password: '',
      isshow1: false,
      isshow2: false,
      loginbox: true
    };
  },
  methods: {

    onSubmit() {
      // console.log('submit', values);
      getAccountLogin(this.username, this.password).then(res => {
        this.$store.commit("userInfo" ,{vuexuserInfo:res.userInfo})
        console.log(res)
      })
    },
    getPhoneCode() {
      getLoginPhoneCode(this.tel).then(() => {
      })
    },
    //立即注册
    isSignIn() {
      //立即注册
         this.isshow1 = true
      //     //忘记密码
          this.isshow2 = false
      //     // 首页
          this.loginbox = false
      //eslint-disable-next-line no-debugger
      // debugger
    },
    //忘记密码
    isForget() {
      //立即注册
      this.isshow1 = !false,
      //     //忘记密码
          this.isshow2 = true
      // //首页
        this.loginbox =! false
    },
    //首页
    loginbbox() {
          //立即注册
          this.isshow1 = false,
           //忘记密码
          this.isshow2 = false
    }
  }
}
</script>

<style scoped lang="less">
.box{
  //height: 280px;
  width: 300px;
  .title1{
    margin: 10px auto;
  }
}
/deep/.van-button--info{
  background-color:#00cf8c ;
border: #00cf8c;
  margin-top: 20px;
}
/deep/.van-cell::after{
  border-bottom:1px solid  #00cf8c;
}
/deep/.van-cell{
  margin-top: 8px;
  padding: 10px 26px;
}
.bttn{
  display: flex;
  justify-content: space-between;
  span{
  padding: 0 15px;
  }
}
</style>